<template>
  <div class="product-detail">
    <s-Header name="商品详情" :nomore="false" :noback="false" ></s-Header>
    <div class="detail-content">
      <!-- 图片轮播图 -->
      <div class="detail-swipe-wrap">
        <van-swipe class="my-swipe" indicator-color="#1baeae">
          <van-swipe-item v-for="(item, index) in state.detail.goodsCarouselList" :key="index">
            <img :src="item" alt="">
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 产品简介 -->
      <div class="product-info">
        <p class="product-title">
          {{ state.detail.goodsName || '' }}
        </p>
        <p class="product-desc">免邮费 顺丰快递</p>
        <div class="product-price">
          <span>¥{{ state.detail.sellingPrice || '' }}</span>
        </div>
      </div>

      <!-- 产品详情分类 -->
      <div class="product-intro">
        <ul>
          <li>概述</li>
          <li>参数</li>
          <li>安装服务</li>
          <li>常见问题</li>
        </ul>
        <div class="product-content" v-html="state.detail.goodsDetailContent || ''"></div>
      </div>

    </div>
    <!-- ActionBar 动作栏 使用 -->
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" @click="goHome" />
      <van-action-bar-icon icon="cart-o" text="购物车" :badge="count" @click="goToCart" />
      <van-action-bar-button type="danger" text="加入购物车" @click="addToCart" />
      <van-action-bar-button type="danger" text="立即购买" @click="addGotoCart" />
    </van-action-bar>
  </div>
</template>
<script setup>
  import { useRoute, useRouter } from 'vue-router'
  import { reactive, ref, isRef, isReactive,nextTick, onUnmounted, onMounted  } from 'vue'
  import { showSuccessToast, showFailToast, showLoadingToast, closeToast } from 'vant'
  import { getDetail } from '@/service/good'
  import { addCart } from '@/service/cart'
  import { prefix } from '@/common/js/utils'
  import sHeader from '@/components/SimpleHeader.vue'
  import { useCounterStore } from '@/stores/counter'
  import { useCartStore } from '@/stores/cart'
  import { storeToRefs } from 'pinia'

  const cart = useCartStore()
  const {updateCart} = cart;
  const {count,doubleCount} = storeToRefs(cart);

  const router = useRouter();
  const route = useRoute();
  console.log('router...',router,route)

  // const couter = useCounterStore()
  // // 直接从stores中结构state级getter和props中结构相同,会失去响应式
  // // 使用storeToRefs处理后即可
  // // const {count,doubleCount} = couter;
  // const {count,doubleCount} = storeToRefs(couter);
  // console.log('couterStore...',couter)
  // console.log('setup...中stores结构...',count,doubleCount)

  const state = reactive({
    detail: {
      goodsCarouselList: []
    }
  })
   onMounted(async()=>{
    const { id } = route.params
    const { data } = await getDetail(id)
    data.goodsCarouselList = data.goodsCarouselList.map(i => prefix(i))
    state.detail = data
  })

  const goHome = ()=> {
    router.push({path:'/home'})
  }
  const goToCart = () => { // 跳到购物车
    router.push({ path: '/cart' })
  }
  const addToCart = async () => { // 添加到购物车
    const {resultCode} = await addCart({ goodsCount: 1, goodsId: state.detail.goodsId })
    if(resultCode === 200){
      showSuccessToast('添加成功');
      cart.updateCart();
    }
  }
  const addGotoCart = async ()=>{
    const {resultCode} = await addCart({ goodsCount: 1, goodsId: state.detail.goodsId })
    if(resultCode === 200){
      showSuccessToast('添加成功');
      cart.updateCart();
      router.push({ path: '/cart' })
    }
  }
  const goBack = () => {
    router.go(-1)
  }
  const goTo = (r, query) => {
    router.push({ path: r, query: query || {} })
  }
</script>
  

<style lang="less" >
   
</style>
<style lang="less" scoped>
  .product-detail{
    .detail-content{
      .detail-swipe-wrap {
        .my-swipe .van-swipe-item {
          line-height: 0px;
          img {
            width: 100%;
            // height: 300px;
          }
        }
      }

      .product-info{
        padding: 0px 10px;
        .product-title{
          font-size: 20px;
          text-align: left;
          color: #333;
        }
        .product-desc{
          font-size: 14;
          text-align: left;
          color: #999;
          padding: 2.2px 0;
        }
        .product-price{
          font-size: 22px;
          color: #f63515;
        }
      }
      .product-intro{
        padding-bottom: 50px;
        ul{
          width: 100%;
          display: inline-flex;
          justify-content: space-evenly;
          font-size: 16px;
          margin: 2px 0px;
          li{
            flex: 1;
            text-align: center;
            position: relative;
            // &:nth-child(1){
            //   background-color: red;
            // }
            // &:nth-last-child(1){
            //   background-color: green;
            // }
            &:not(:last-child){
              &::after{
                content: '';
                display: inline-block;
                width: 1px;
                height: 100%;
                background: #ccc;
                position: absolute;
                top: 0;
                right: 0;
              }
            }
          }
        }
      }
      .product-content{
        padding:2px 20px;
      }
    }
  }
</style>